'use client'

import { motion } from 'framer-motion'
import Image from 'next/image'

interface KeyboardCardProps {
  keyboard: {
    id: number
    name: string
    price: number
    image: string
    description: string
  }
}

export default function KeyboardCard({ keyboard }: KeyboardCardProps) {
  return (
    <motion.div
      whileHover={{ scale: 1.05 }}
      className="bg-white rounded-lg shadow-lg overflow-hidden"
    >
      <div className="aspect-w-16 aspect-h-9 relative">
        <Image
          src={keyboard.image}
          alt={keyboard.name}
          fill
          className="object-cover"
        />
      </div>
      <div className="p-6">
        <h3 className="text-xl font-semibold mb-2">{keyboard.name}</h3>
        <p className="text-gray-600 mb-4">{keyboard.description}</p>
        <div className="flex justify-between items-center">
          <span className="text-2xl font-bold">${keyboard.price}</span>
          <motion.button
            whileHover={{ scale: 1.05 }}
            whileTap={{ scale: 0.95 }}
            className="bg-accent text-white px-4 py-2 rounded-full"
          >
            Add to Cart
          </motion.button>
        </div>
      </div>
    </motion.div>
  )
} 